import React, { useState, useEffect } from 'react'
import { allNav, subNav } from './nav.js'
import './nav.css'

export default function Nav() {
    const [list, setList] = useState(allNav)
    const [flag, setFlag] = useState(true)

    useEffect(() => {
        if (flag) {
            setList(subNav)
        } else {
            setList(allNav)
        }
    }, [flag])
    return (
        <div>
            <div className='nav'>
                {
                    list.map((item, index) => {
                        return <a href={ item.url } key={index}>
                            {item.text}
                        </a>
                    })
                }
            </div>

            <p onClick={async () => {
                await setFlag(!flag)
            }} className='nav_p'>
                {
                    flag ? "↓↓↓ 展开" : "↑↑↑ 收起"
                }
            </p>
        </div>

    )
}
